<template>
  <div id="home" class="container-xl bg-white min-height">
    <div class="row">
      <h4 class="col h">题单列表</h4>
    </div>
    <div class="row" :style="{ marginBottom: '48px' }">
      <div class="col" style="padding-left: 48px">
        <div>
          <div style="border-radius: 2px 0px 0px 2px"
            @click="routepush({ isteam: 0, usertype: 'user', purpose: '', order: 'top', sortable: 'asc' })"
            :class="!isteam ? ['能力测评', '初试练习', '我的题单'].includes(route.query.purpose) ? 'div-info' : 'div-success' : 'div-info'"
            class="d-inline-block div-a1 cu">公开题单</div>
          <div v-if="getuser" @click="isteam = 1" style="border-radius: 0px 2px 2px 0px"
            :class="isteam ? 'div-success' : 'div-info'" class="d-inline-block div-a1 cu">团队题单</div>
          <div v-if="getuser"
            @click="routepush({ purpose: route.query.purpose === '能力测评' ? '' : '能力测评', isteam: 0, order: 'ID', sortable: 'asc' })"
            style="border-radius: 0px 2px 2px 0px" :class="route.query.purpose === '能力测评' ? 'div-success' : 'div-info'"
            class="d-inline-block div-a1 cu">测评题单
          </div>
          <div v-if="getuser"
            @click="routepush({ purpose: route.query.purpose === '初试练习' ? '' : '初试练习', isteam: 0, order: 'ID', sortable: 'asc' })"
            style="border-radius: 0px 2px 2px 0px" :class="route.query.purpose === '初试练习' ? 'div-success' : 'div-info'"
            class="d-inline-block div-a1 cu">初试练习
          </div>
        </div>
      </div>
      <div class="col text-right" :style="{ paddingRight: '48px' }">
        <el-input v-model.lazy="_formInline.name" placeholder="题单名称">
          <template #append>
            <el-button @click="onSubmit" class="bg-43">
              <el-icon>
                <Search />
              </el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </div>
    <div class="row" v-loading="loading">
      <div class="col" :style="{ padding: '0 24px 0 24px' }">
        <table class="table table-borderless table-hover table-striped">
          <thead class="border-bottom thead">
            <tr class>
              <td width="184" class="m-pl-6 m-border-2">编号</td>
              <td scope="col">题单</td>
              <td width="300" class="m-border-2  text-center">包含题目标签</td>
              <td width="80" class="m-border-2  text-center">题单题目数</td>
              <td width="110" class="m-border-2  text-center">我的提交题目数</td>
              <td width="80" class="m-border-2  text-center">我的AC率</td>
            </tr>
          </thead>
          <tbody>
            <router-link custom v-for="(v, key) in getquestionbank" :key="key"
              :to="{ name: '题库列表', params: { ID: v.ID }, query: { istest: route.query.purpose ? 1 : 0 } }"
              v-slot="{ navigate, isActive }">
              <tr :active="isActive" @click="navigate" class="cu">
                <td class="m-pl-6 m-border-2">{{ v.ID }}</td>
                <td>
                  <el-text size="default" :style="{ maxWidth: '380px', display: 'table-cell' }" truncated>
                    {{ v.name }}
                    <!-- <button v-show="index(v.userquestion)"
                        class="btn btn-primary rounded-pill border-white shadow">最近提交</button> -->
                  </el-text>
                </td>
                <td class="text-left m-border-2 question-label">
                  <div class="">
                    <el-tag text plain size="small" class="el-tag" v-for="(vo, keys) in v.questionlabel"
                      v-text="getlabel.find(e => e.ID === vo.labelid)?.name" :key="`1-${keys}`"></el-tag>
                  </div>
                </td>
                <td class="text-center m-border-2 " v-text="v.questionquestionbank?.length"></td>
                <td class="text-center m-border-2 " v-text="v.count"></td>
                <td class="text-center m-border-2 "
                  v-text="v.ACcount ? Math.floor(Number(v.ACcount / v.questionquestionbank?.length) * 100) + '%' : 0">
                </td>
              </tr>
            </router-link>
          </tbody>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="getquestionbankcount" @current-change="change"
          layout="prev, pager, next" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue';
import { assign, debounce } from "underscore";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { LocationQueryRaw, useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Iobj } from "../../../api/index";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
const _formInline = reactive<Iobj<Studycodemodel.Iquestionbank>>({
  teamid: [],
  name: "",
  label: "",
})

function onSubmit() {
  router.push({
    query: {
      order: "top",
      offset: 0,
      limit: 20,
    },
  });
  start();
}

function routepush(query: LocationQueryRaw) {
  router.push({ query: assign({}, route.query, query) })
}



const store = useStore(Storekey)
const router = useRouter()
const route = useRoute()
const loading = ref(true)
const getquestionbank = computed(() => {
  return store.state.questionbank?.rows || []
})

const getlabel = computed(() => {
  return store.state.label?.rows || []
})

const getquestionbankcount = computed(() => {
  return store.state.questionbank?.count || 0
})
const getteam = computed(() => {
  return store.state.team?.rows || []
})

const getuser = computed(() => {
  return store.state.user
})

const offset = computed(() => {
  return Number(route.query.offset || 0)
})

const sortable = computed(() => {
  return String(route.query.sortable || 'asc')
})
const limit = computed(() => {
  return Number(route.query.limit || 20)
})


const order = computed(() => {
  return String(route.query.order || 'top') as keyof Studycodemodel.Iquestionbank
})

watch(_formInline, () => {
  router.push({
    query: assign({}, route.query, {
      order: "top",
      offset: 0,
      limit: 20,
    }),
  })
})



const formInline = computed(() => {
  const I: Iobj<Studycodemodel.Iquestionbank> = {
    _order: order.value,
    _offset: offset.value,
    _sortable: sortable.value || 'ASC',
    _limit: limit.value,
  }
  if (route.query.purpose) {
    I.purpose = route.query.purpose
  }
  if (_formInline.name) {
    if (_formInline.name == Number(_formInline.name)) {
      I._like = ['ID', _formInline.name]
    } else {
      I._like = ['name', _formInline.name]
    }
  }
  let usertype = "public";
  if (isteam.value) {
    usertype = "team";
    I.teamid = teamid.value ? teamid.value : getteam.value.map((v) => v.ID)
  }
  I.usertype = usertype
  return I
})

onMounted(() => {
  start()
})



const teamid = computed(() => {
  return route.query.teamid as string | undefined
})


const isteam = computed({
  get() {
    return Number(route.query.isteam || 0)
  },
  set(y: number) {
    router.push({
      query: {
        order: "top",
        offset: 0,
        limit: 20,
        isteam: y,
      },
    });
  },
})

watch(formInline, () => {
  if (route.name === '题单') {
    start()
  }
})

const debouncet1 = ref(debounce(async () => {
  loading.value = true;
  await store.dispatch("actionquestionbank", formInline.value);
  loading.value = false;
}, 300))

function start() {
  debouncet1.value()
}

function change(r: number) {
  router.push({
    name: "题单",
    query: assign({}, route.query, {
      limit: limit.value,
      order: order.value,
      offset: (r - 1) * limit.value
    }),
  });
}

function index(v?: Studycodemodel.Iuserquestion[]) {
  if (!v) return false;
  const [x] = v;
  if (x) {
    const z = new Date(x.createdAt).getTime() || Date.now();
    return Date.now() < z + 1000 * 60 * 60 * 24 * 7;
  }
  return false;
}

</script>

<style scoped>
.bg {
  background-color: #f2f2f2;
}

.cu {
  cursor: pointer;
}

/* .el-tag {
  --el-tag-text-color: #000
} */

.min-height {
  margin-top: 24px;
  margin-bottom: 48px;
  padding-bottom: 24px;
}

.btn {
  padding: 3px 8px;
  font-size: 12px;
}

tr {
  line-height: 48px;
  height: 48px;
  overflow: hidden;
}

td {
  padding: 0 !important;
}

.div-success {
  background-color: var(--color-43);
  color: #ffffff;
}

.div-info {
  background-color: #d9d9d9;
  color: #8c8c8c;
}

.div-a1 {
  width: 104px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.h {
  font-weight: bold;
  font-size: 32px;
  margin-bottom: 48px;
  margin-top: 48px;
  padding-left: 48px;
  padding-right: 48px;
}

.m-pl-6 {
  padding-left: 24px !important;
}

.m-pr-6 {
  padding-right: 24px !important;
}

.question-label {
  line-height: 24px;
  height: 48px;
  display: grid;
  --el-color-primary-light-8: var(--color-cheng);
  align-content: center;
}

.question-label div {
  max-height: 48px;
}

.question-label .el-tag--small {
  margin-right: 2px;
}
</style>

<style>
.bg-43 {
  background-color: var(--color-43) !important;
  color: #ffffff !important;
  border-radius: 0px 2px 2px 0px !important;
}

#tabs .el-tabs__item {
  height: 50px !important;
  line-height: 50px;
}

#tabs .el-form-item {
  margin-bottom: 0px;
}
</style>